<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->

<div id="test"></div>

<!--引入库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>


<script type="text/babel">

    /***
     * 如果 ref 回调函数是以内联函数的方式定义的，
     * 在更新过程中它会被执行两次，
     * 第一次传入参数 null，
     * 然后第二次会传入参数 DOM 元素。
     *
     *
     *
     * 这是因为在每次渲染时会创建一个新的函数实例，
     * 所以 React 清空旧的 ref 并且设置新的。
     * 通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，
     * 但是大多数情况下它是无关紧要的。
     *
     *
     */


     /*
        1. 通过onXxx属性指定事件的处理函数（注意大小写）
            (1)React使用的是自定义(合成)事件，而不是使用原生DOM事件 ———— 为了更好的兼容性
            (2)React中的事件是通过事件委托方式处理的，委托给组件最外层的元素 ———— 为了更好的效率

        2. 通过event.targe得到发生事件的DOM元素对象   
     */



     /*
        发生事件的事件源和数据源相同，ref可以省略
     */

        //1.创建虚拟DOM
    class Demo extends React.Component{


        /*
        * React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点
        * 该容器只能存一个节点
        */
        myRef = React.createRef();
        youRef = React.createRef();

        state={
            isHot:true
        };

        render() {
            const {isHot}=this.state;
            return (
                <div>
                    <h2>今天天气很{isHot?"炎热":"凉爽"}</h2>
                    {/*<input ref={(c)=>{this.input1=c;console.log("@",c);}} type="text" placeholder="点击按钮提示数据"/>*/}

                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                    <button  onClick={this.showData}>点我提示左侧数据</button>
                    <br/><br/>
                    <input onBlur={this.showBlurData} type="text" placeholder="点击按钮提示数据"/>
                </div>
            );
        }



        //展示左侧输入框的数据
        showData = ()=>{
            console.log(this.myRef.current.value);
            alert(this.youRef.current.value);
        };


        showBlurData = (event)=>{
            console.log(event.target);
            alert(event.target.value);
        }


    }
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>

</body>
</html>
